<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <el-scrollbar height="400px">
    <div v-for="(process, processIndex) in processes" :key="processIndex" class="rounded-lg">
      <h2 class="text-xl font-semibold mb-4" v-if="process.eqptList?.length > 0">
        {{ process.processName }}
      </h2>

      <el-checkbox-group
        v-model="checkEquipment"
        value-key="eqptCode"
        class="grid grid-cols-3 gap-4"
        :disabled="disabled"
      >
        <el-checkbox
          v-for="(equipment, equipIndex) in process.eqptList"
          :label="equipment.name"
          :key="equipIndex"
          :value="{
            id: process.id,
            eqptCode: equipment.code,
          }"
          @change="handleCheckEquipment(process.id, equipment)"
        />
      </el-checkbox-group>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

interface Equipment {
  bindProcess: boolean;
  code: string;
  createTime: string;
  id: number;
  name: string;
  remark: string;
  status: number;
  type: string;
}

interface Process {
  capacity: number;
  code: string;
  eqptCode: string;
  eqptList: Equipment[];
  id: number;
  parentCode: string;
  personPlan: number;
  processCode: string;
  processName: string;
  sortSeq: number;
  workHour: number;
}
const { processes } = defineProps({
  processes: {
    type: Array as PropType<Process[]>,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:checkEquipment"]);
const checkEquipment = ref<string[]>([]);

const handleCheckEquipment = (processId: number, equipment: Equipment) => {
  console.log("handleCheckEquipment", processId, equipment);
  //过滤出与id相同的设备，并返回该设备,并拼接出该设备的eqptCode,

  const filterEquipment = JSON.parse(
    JSON.stringify(checkEquipment.value.filter((item: any) => item.id === processId))
  );
  let eqptCode: any = [];
  filterEquipment.forEach((item: any) => {
    eqptCode.push(item.eqptCode);
  });

  emit("update:checkEquipment", {
    id: processId,
    eqptCode: eqptCode.join(","),
  });
};

onMounted(() => {
  //将processes处理成数组[{id:id,eqptCode:eqptCode}]
  checkEquipment.value = [];
  processes.forEach((process: any) => {
    if (process.eqptList && process.eqptList.length > 0) {
      console.log("process.eqptList", process.eqptList);

      process.eqptList.forEach((item: any) => {
        // checkEquipment.value.push(JSON.stringify({ id: process.id, eqptCode: item.code }));
        checkEquipment.value.push({ id: process.id, eqptCode: item.code } as unknown as string);
      });
    }
  });

  console.log("processes", checkEquipment.value);
});
onUnmounted(() => {
  checkEquipment.value = [];
});
</script>

<style scoped>
.shadow-up {
  box-shadow:
    0 -4px 6px -1px rgba(0, 0, 0, 0.1),
    0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
